<template>
  <!-- <div> -->
  <div class="RadarView1">
    <div id="RadarView"></div>
  </div>
  <!-- </div> -->
</template>
  
  <script setup lang="ts">
const echart = inject("echart");
let myChart = null;
import { menuStore } from "@/store/modules/menu";
const menulist = menuStore();
menulist.$subscribe((arg, state) => {
  //需要写在数据变化前面
  // console.log("subscribe", arg, state);
  getData();
});

const props = defineProps({
  width: {
    type: String,
    default: "100%"
  },
  height: {
    type: String,
    default: "300px"
  }
});

onMounted(() => {
  initEcharts();
  getData();
});
onUnmounted(() => {
  if (myChart.isDisposed) {
    myChart.clear();
    myChart.dispose();
    myChart = null;
  }
});

const getData = () => {
  let value = Math.floor(Math.random() * 100) + 1;
  let order = "Ⅳ";
  renderEcharts(value, order);
};
const initEcharts = () => {
  myChart = echart.init(document.getElementById("RadarView"));
};
const renderEcharts = (value: any, order: any) => {
  var xdata = [
    {
      name:"单位增加值能耗",
      value:Math.floor(Math.random() * 8000) + 1
    },
    {
      name:"能耗消费进度",
      value:Math.floor(Math.random() * 8000) + 1
    },
    {
      name:"柔性调控参与率",
      value:Math.floor(Math.random() * 8000) + 1
    },
    {
      name:"亩均论英雄评级",
      value:Math.floor(Math.random() * 8000) + 1
    },
    {
      name:"腾出用能总量",
      value:Math.floor(Math.random() * 8000) + 1
    }
  ];
// console.log(xdata);.

  myChart.setOption({

    title: [
      {
        text: value,
        left: "48%",
        top: "45%",
        textAlign: "center",
        textStyle: {
          fontSize: "50",
          fontWeight: "400",
          color: "#fff",
          textAlign: "center"
        }
      },
      {
        text: "分",
        left: "53%",
        top: "47.5%",
        textAlign: "center",
        textStyle: {
          fontSize: "25",
          fontWeight: "400",
          color: "#fff",
          textAlign: "center"
        }
      },
      {
        subtext: "限电轮次：" + order,
        left: "50%",
        top: "51%",
        textAlign: "center",
        subtextStyle: {
          fontSize: "15",
          fontWeight: "400",
          color: "#fff",
          textAlign: "center"
        }
      }
    ],
    radar: {
      name: {
        textStyle: {
          color: "#c1c3c4",
          fontSize: 14
        }
      },
      indicator: xdata,
      axisLine: {
        lineStyle: {
          color: "rgba(153, 209, 246, 0.5)" // 轴线颜色
        }
      },
      splitArea: {
        show: false,
        areaStyle: {
          color: "rgba(255,0,0,0)" // Rader图背景颜色
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: "rgba(153, 209, 246, 0.5)" // 网格分割线颜色
        }
      }
    },

    series: [
      {
        name: "柔性调控评价",
        type: "radar",
        data: [
          {
            value: xdata.map(v=>v.value),
            areaStyle: {
              color: "rgba(64, 158, 255, 0.2)"
            },
            itemStyle: {
              normal: {
                color: "#c8eeff",
                borderColor: "#2cc1fa"
              }
            },
            lineStyle: {
              color: "rgba(146, 225, 255, 1)",
              width: 1
            }
          }
        ]
      }
    ]
  });
};
window.addEventListener("resize", () => {
  //监听浏览器大小去改变图表尺寸
  myChart.resize();
});
</script>
  
  <style scoped>
.RadarView1 {
  height: 100%;
  width: 100%;
  /* height: 500px; */
  /* background-color: aliceblue; */
}

#RadarView {
  height: 100%;
  width: 100%;
  /* background-color: aliceblue; */
}
</style>